<template>
  <h1>{{ user_01  }}</h1>
  <h1>姓名：{{ name }}</h1>
  <h1>年龄：{{ age }}</h1>
 <button @click="setAge">按钮</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script>
  import { toRef , reactive ,ref , toRefs} from 'vue'
 export  default {
  setup(){
    let user_01 = ref({
      name:"张三",
      age:18
    })
    // 修改年齡的方法
  const setAge = ()=>{
    user_01.value.age++
  }
    return {
      user_01,
      ...toRefs(user_01.value),
      setAge
    }
  }
 }
</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<!-- <script>
  export default {
    name:"App"
  }
</script> -->